<style>
    .ng-invalid {
        background-color: lightpink;
    }

    .ng-valid {
        background-color: lightgreen;
    }

    span.error {
        color: red;
        font-weight: bold;
    }
</style>

<h2>Check out now</h2>
<p>Please enter your details,and we'll ship your good right away!</p>
<form name="shippingForm" novalidate>
    <div class="well">
        <h3>Ship to</h3>
        <label>Name</label>
        <input name="name" class="form-control" ng-model="data.shipping.name" type="text" required>
        <span class="error" ng-show="shippingForm.name.$error.required">Please enter a name</span>

        <h3>address</h3>

        <div class="form-group">
            <label>Street Address</label>
            <input name="street" class="form-control" ng-model="data.shipping.street" required>
            <span class="error" ng-show="shippingForm.street.$error.required">Please enter a street address</span>
        </div>
        <div class="form-group">
            <label>City</label>
            <input name="city" class="form-control" ng-model="data.shipping.city" required>
            <span class="error" ng-show="shippingForm.city.$error.required">Please enter a city</span>
        </div>
        <div class="form-group">
            <label>State</label>
            <input name="state" class="form-control" ng-model="data.shipping.state" required>
            <span class="error" ng-show="shippingForm.state.$error.required">Please enter a state</span>
        </div>
        <div class="form-group">
            <label>Zip</label>
            <input name="zip" class="form-control" ng-model="data.shipping.zip" required>
            <span class="error" ng-show="shippingForm.zip.$error.required">Please enter a zip</span>
        </div>
        <div class="form-group">
            <label>Country</label>
            <input name="country" class="form-control" ng-model="data.shipping.country" required>
            <span class="error" ng-show="shippingForm.country.$error.required">Please enter a country</span>
        </div>
        <h3>Options</h3>

        <div class="checkbox">
            <label>
                <input name="giftwrap" type="checkbox" ng-model="data.shipping.giftwrap">
                Gift wrap these items</label>
        </div>

        <div class="text-center">
            <button ng-disabled="shippingForm.$invalid" ng-click="sendOrder(data.shipping)" class="btn btn-primary">Complete order</button>
        </div>

    </div>
</form>